<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<style type = "text/css" >
				*{
					list-style: none;
					padding: 0px;
					margin: 0px;
				}
				.luobo{
					margin: 0 auto;
					position: relative;	
					width:730px;
					height: 454px;
					border: 1px red solid;
					overflow: hidden ;
				}
				.luobo ul{
					float: left;
					width:730px;
					height: 454px;
					position:relative;
					
				}
				.luobo ul li {
					float: left;			
					position: relative;
				}
				.span{
					position:absolute;
				    width:300px;
				    height:20px;
				    bottom:10px;
				    left:80px;
				}
				.frist{
					 background-color:rgba(155,83,244,0.79);
				     border:solid 1px #BEEBEC;
				     border-radius:4px;

				}
				.pre {
				    position:absolute;
				    left:0px;
				    top:320px;
				    float:left;
				    border-left:solid 1px rgba(251,245,246,1.00);
				    opacity:0.5;
				}
				.next {
				    position:absolute;
				    right:0px;
				    top:320px;
				    float:right;
				    border-left:solid 1px rgba(251,245,246,1.00);
				    opacity:0.5;
				}             
		</style>
		<script>
			$(document).ready(function(){
			    var luobo = $(".luobo");
			    var ul = luobo.find("ul");
//			    var height = luobo.find("ul li").eq(0).height();
//			    console.log(height);
			    var number = luobo.find(".span span");
//			    console.log(number.length)
			    var timer = null;
			    var count = 0;
			    number.on ("click",function(){
			    	$(this).addClass("frist").siblings("span").removeClass("frist");
			    	count = $(this).index();
			    	ul.animate({
			    		bottom : 456*count
			    	});
			    });
			    //定时器，自动播放
			    timer = setInterval(function(){
			    	count ++
			    	if(count == number.length){count = 0};number.eq(count).trigger("click")
			    },2000);
			});
		</script>
	</head>
	<body>
		<div class="luobo">
			<ul>
				<li><img src="img/jd/img/asd-1.jpg"/></li>
				<li><img src="img/jd/img/asd-2.jpg" /></li>
				<li><img src="img/jd/img/asd-3.jpg" /></li>
				<li><img src="img/jd/img/asd-4.jpg" /></li>
			</ul>
		
		<div class = 'span'>
			<span  class = "frist" >1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
		<div class = "pre"> < </div>
		<div class = 'next'> > </div>
	</div>
	</body>
	
</html>
